<template>
    <div class="settlement-page">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">支付配置</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/edit-merchant' }">编辑微信商户v3</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="settlement-content">
            <!-- 经营者（收款人）信息 -->
            <div class="title">
                经营者（收款人）信息
            </div>
            <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" :inline="true" style="display: flex;">
                <div style="width:100%;display: flex;">
                    <div>
                        <el-form-item label="身份证姓名" style="margin-bottom:10px" required>
                            <el-input v-model="ruleForm.operatorName" placeholder="" style="width:180px;" />
                        </el-form-item>
                        <el-form-item label="身份证号码" required>
                            <el-input v-model="ruleForm.operatorIDcard" placeholder="" style="width:180px;" />
                            <div class="tip">仅限中国大陆身份证</div>
                        </el-form-item>
                        <div class="dfc">
                            <el-form-item label="身份证有效期" style="display: flex;" required>
                                <el-date-picker v-model="ruleForm.operatorIDcardTime1" type="date" placeholder=""
                                    :default-value="new Date(2010, 9, 1)" style="margin-bottom: 10px;width:180px;" />
                                <span style="margin: 0px 4px;">至</span>
                                <el-date-picker v-model="ruleForm.operatorIDcardTime2" type="date" placeholder=""
                                    :default-value="new Date(2010, 9, 1)" style="margin-bottom: 10px;width:180px;" />
                                <el-checkbox v-model="checked2" style="margin: 0px 4px;">长期</el-checkbox>
                            </el-form-item>
                        </div>
                    </div>
                    <div>
                        <el-form-item label="身份证正面" required>
                            <el-upload class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <el-icon class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <img src="/src/assets/system/IDcard1.png" class="avatar"
                                style="width: 140px; height: 100px;margin-left:20px" />
                            <span class="example">示例</span>
                            <div class="tip">支持 .jpg .jpeg .png 格式，必须为彩色图片且小于2M</div>
                        </el-form-item>
                        <el-form-item label="身份证反面" required>
                            <el-upload class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <el-icon class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <img src="/src/assets/system/IDcard2.png" class="avatar"
                                style="width: 140px; height: 100px;margin-left:20px" />
                            <span class="example">示例</span>
                            <div class="tip">支持 .jpg .jpeg .png 格式，必须为彩色图片且小于2M</div>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="联系人手机号" required>
                            <el-input v-model="ruleForm.operatorTel" placeholder="" style="width:180px" />
                            <div class="tip">将接受来自微信支付的重要通知</div>
                        </el-form-item>
                        <el-form-item label="联系邮箱" required style="margin-top: 20px;" label-width="100"
                            label-position="right">
                            <el-input v-model="ruleForm.operatorEmail" placeholder="" style="width:180px" />
                            <div class="tip">将接受来自微信支付的账号密码重要通知，建议使用常用邮箱</div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- 经营资料 -->
            <div class="title">
                经营资料
            </div>
            <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" :inline="true" style="display: flex;">
                <div style="width:100%;display: flex;flex-wrap: auto;">
                    <div>
                        <div class="df">
                            <el-form-item label="商户简称" style="margin-bottom:10px" required>
                                <el-input v-model="ruleForm.resourceName" placeholder="" />
                            </el-form-item>
                            <el-form-item label="客服电话" required>
                                <el-input v-model="ruleForm.resourceTel" placeholder="" />
                            </el-form-item>
                        </div>
                        <div class="tip mb10">商户简称微信支付审核通过后不可修改，商户简称会显示给到消费者</div>
                        <div>
                            <el-form-item label="门店地址" required>
                                <el-input v-model="ruleForm.resourceAddress" placeholder="" />
                            </el-form-item>
                            <el-form-item label="详细地址" required>
                                <el-input v-model="ruleForm.resourceDescAddress" placeholder="" />
                            </el-form-item>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <el-form-item label="上传门店门口照片" required>
                            <el-upload class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <el-icon class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <div class="tip red">此图请上传真实的门店门口照片或售货机照片，否则后续将有可能影响支付功能。</div>
                        </el-form-item>
                        <el-form-item label="上传门店店内照片" required>
                            <el-upload class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <el-icon class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <div class="tip red">此图请上传真实的门店店内照片或售货机照片，否则后续将有可能影响支付功能。</div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- 经营者银行开户信息 -->
            <div class="title">
                经营者银行开户信息
            </div>
            <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" :inline="true" style="display: flex;">
                <el-form-item label="开户名称" style="margin-bottom:10px" required>
                    <el-input v-model="ruleForm.infoName" placeholder="" />
                </el-form-item>
                <el-form-item label="开户银行" style="margin-bottom:10px" required>
                    <el-input v-model="ruleForm.infoBank" placeholder="" />
                </el-form-item>
                <el-form-item label="银行账号" style="margin-bottom:10px" required>
                    <el-input v-model="ruleForm.infoBankNo" placeholder="" />
                </el-form-item>
                <el-form-item label="开户银行省市" style="margin-bottom:10px" required>
                    <el-input v-model="ruleForm.infoCity" placeholder="" />
                </el-form-item>
            </el-form>
            <!-- 补充材料 -->
            <div class="title">
                补充材料
            </div>
            <el-form :model="ruleForm" label-position="left" :inline="true">
                <div>
                    <el-form-item label="补充说明" style="margin-bottom:10px">
                        <el-input v-model="ruleForm.extraDesc" placeholder="请填写补充说明" />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="补充材料">
                        <el-upload class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <el-icon class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <div class="tip red" style="margin-left:60px">按照驳回要求上传补充材料，最多上传5张图</div>
                </div>
            </el-form>
            <div class="checked">
                <el-checkbox v-model="checked2" style="margin: 0px 4px;"></el-checkbox>
                我已认真阅读以上支付方式，选择了正确的支付方式，并填写完整需要的资料。
            </div>
            <div class="save-btn">
                <el-button round color="#0071bb" @click="onSave()">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
const router = useRouter();
interface Iform {
    operatorName: string,
    operatorIDcard: string,
    operatorIDcardImg1: string,
    operatorIDcardImg2: string,
    operatorIDcardTime1: string,//身份证有效期
    operatorIDcardTime2: string,//身份证有效期
    operatorTel: string,//*联系人手机号
    operatorEmail: string,//*联系邮箱
    // 经营资料
    resourceName: string,//商户简称
    resourceTel: string,//客服电话
    resourceImg1: string,//上传门店门口照片
    resourceImg2: string,//上传门店店内照片
    resourceAddress: string,//门店地址
    resourceDescAddress: string,//详细地址
    // 经营者银行开户信息
    infoName: string,//开户名称
    infoBank: string,//开户银行
    infoBankNo: string,//银行账号
    infoCity: string,//开户银行省市
    // 补充材料
    extraDesc: string,//补充说明
    extraMaterials: string//补充材料
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<Iform>({
    // 经营者（收款人）信息
    operatorName: '',//身份证姓名
    operatorIDcard: '',//身份证号
    operatorIDcardImg1: '',//身份证正面 
    operatorIDcardImg2: '',//身份证反面
    operatorIDcardTime1: '',//身份证有效期
    operatorIDcardTime2: '',//身份证有效期
    operatorTel: '',//*联系人手机号
    operatorEmail: '',//*联系邮箱
    // 经营资料
    resourceName: '',//商户简称
    resourceTel: '',//客服电话
    resourceImg1: '',//上传门店门口照片
    resourceImg2: '',//上传门店店内照片
    resourceAddress: '',//门店地址
    resourceDescAddress: '',//详细地址
    // 经营者银行开户信息
    infoName: '',//开户名称
    infoBank: '',//开户银行
    infoBankNo: '',//银行账号
    infoCity: '',//开户银行省市
    // 补充材料
    extraDesc: '',//补充说明
    extraMaterials: ''//补充材料

})
// 校验
const rules = reactive<any>({
    // 经营者（收款人）信息
    operatorName: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorIDcard: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorIDcardImg1: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorIDcardImg2: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorIDcardTime1: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorIDcardTime2: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorTel: [{ required: true, message: '请输入', trigger: 'blur' }],
    operatorEmail: [{ required: true, message: '请输入', trigger: 'blur' }],
    // 经营资料
    resourceName: [{ required: true, message: '请输入', trigger: 'blur' }],
    resourceTel: [{ required: true, message: '请输入', trigger: 'blur' }],
    resourceImg1: [{ required: true, message: '请输入', trigger: 'blur' }],
    resourceImg2: [{ required: true, message: '请输入', trigger: 'blur' }],
    resourceAddress: [{ required: true, message: '请输入', trigger: 'blur' }],
    resourceDescAddress: [{ required: true, message: '请输入', trigger: 'blur' }],
    // 经营者银行开户信息
    infoName: [{ required: true, message: '请输入', trigger: 'blur' }],
    infoBank: [{ required: true, message: '请输入', trigger: 'blur' }],
    infoBankNo: [{ required: true, message: '请输入', trigger: 'blur' }],
    infoCity: [{ required: true, message: '请输入', trigger: 'blur' }],
})
const checked2 = ref()
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        return false
    }
    return true
}
// 保存
const onSave = async () => {
    // 校验
    router.push('/payConfig');
}
</script>

<style scoped lang="scss">
.settlement-page {
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

.settlement-content {
    padding: 10px;
    background: #fff;
    margin-top: 20px;
    border-radius: 4px;
}

.title {
    color: #4D4D4D;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdada;
}


.df {
    display: flex;
}

.dfc {
    display: flex;
    align-items: center;
}

.mb10 {
    margin-bottom: 10px;
}



.el-form-item {}

.tip {
    color: #989898;
    font-size: 12px;
    // position: absolute;

}

.red {
    color: #FF0000;
}

.btn {
    margin-top: 44px;
}

.save-btn {
    text-align: center;
}

.checked {
    color: #4D4D4D;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

.example {
    color: #808080;
    font-size: 12px;
    margin-left: 6px;
    align-self: flex-end;
}

:deep(.el-upload) {
    width: 100px !important;
    height: 100px !important;
}
</style>
<style>
.avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    text-align: center;
    background: #dcdada;
}
</style>
<style>
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before {
    color: #4D4D4D;
}
</style>
